<template>
	<view>
		<u-sticky>
			<view class="topWrapper">
				<view class="orderInfoWrapper" @click="showApplyAlert = true">
					<!-- 取车订单信息 -->
					<view class="rentCarInfo">
						<view class="contentBox">
							<text>取车城市:{{city}}</text>
							<text>地址:{{storeName}}</text>
						</view>
						<view class="contentBox">
							<text>取车时间</text>
							<text>{{takeCarTime}}</text>
						</view>
						<view class="contentBox">
							<text>租期</text>
							<text>{{tenancyTerm}}个月</text>
						</view>
					</view>
				</view>


			</view>

			<!-- 筛选 -->
			
			<!-- <view class="filterWrapper">
				<van-dropdown-menu active-color="#009CF9">
					<van-dropdown-item ref="item1" title="综合排序" :options="option1" @change="onChange()" />
					<van-dropdown-item ref="item2" title="品牌">
						<view class="brandWrapper">
							<scroll-view scroll-y class="brandLeft-wrapper">
								<view class="leftContent">
									<view class="brandBox" :class="{active: index === currentBrandIndex}"
										v-for="(item, index) in option2" :key="index"
										@click="selectedBrand(item, index)">
										<image :src="item.logo|mmvImageUrl" mode=""></image>
										<text>{{item.brandName}}</text>
									</view>
								</view>
							</scroll-view>

							<scroll-view scroll-y class="brandRight-wrapper">
								<view class="rightContent">
									<view class="seriesBox" :class="{checked: item.seriesId == seriesId}"
										v-for="(item, index) in option2[currentBrandIndex].seriesListVoList"
										:key="index" @click="selectedSeries(item, index)">
										<text>{{item.seriesName}}</text>
										<image
											:src="seriesId == item.seriesId ? '../static/radio_selected.png' : '../static/radio-default.png'"
											mode=""></image>
									</view>

								</view>
							</scroll-view>

							
							<view class="btnWrapper">
								<text @click="reset">重置</text>
								<text @click="filterConfim()">确认</text>
							</view>
						</view>
					</van-dropdown-item>
				</van-dropdown-menu>
			</view> -->
			
		</u-sticky>



		<!-- 车型列表 -->
		<view class="carWrapper">
			<!-- 左边导航 -->
			<scroll-view scroll-y="true" class="left-wrapper">
				<view class="left-content">
					<view class="title-content" :class="{active: item.classification === classification}"
						v-for="(item, index) in categoryList" :key="item.classification"
						@tap="tabtap(item.classification)">
						<text class="title">{{item.operatingClassification}}</text>
						<text class="price">¥{{item.minPrice}}起</text>
					</view>
				</view>
			</scroll-view>
			<!-- 右边内容 -->
			<scroll-view scroll-y="true" class="right-wrapper">
				<!-- <u-skeleton :loading="loading"> -->
					<view class="right-content" v-if="carList.length > 0">
						<view class="car-item" v-for="(item, index) in carList" :key="item.longPlanId"
							@tap="lookPlan(item)">
							<!-- 顶部 -->
							<view class="carInfoWrapper">
								<image class="carImg" :src="item.url|mmvImageUrl" mode=""></image>
								<view class="carModelContent">
									<text class="carInfo">{{item.modelInfo}}</text>
									<text
										class="other">{{item.speedChangingBox+' ' +item.seating+'   '+item.displacement}}</text>
								</view>
							</view>
							<!-- 中间 -->
							<view class="carLabelWrapper">
								<text class="label" v-for="(label, index) in item.labels" :key="index">{{label}}</text>
							</view>
							<!-- 底部 -->
							<view class="bottomWrapper">
								<view class="btnBox">
									<text class="btnTitle" @click.stop="carDetail(item)">车型详情</text>
								</view>
								<view class="bottomRight">
									<view class="priceBox">
										<text class="priceInfo">{{item.monthlyRent}}</text>
										<text class="priceUnit">/月</text>
									</view>

									<view class="totalPrice">
										{{tenancyTerm+'个月' + '     ' + '总价 ¥' + item.totalPrice}}
									</view>
								</view>


							</view>
						</view>
					</view>
					<u-empty v-else marginTop="100" name="list"></u-empty>
				<!-- </u-skeleton> -->
			</scroll-view>
		</view>

		<u-popup :show="showPlan" @close="showPlan = false" closeable @touchmove.stop.prevent="moveHandle">
			<view class="planWrapper">
				<view class="planTitle"><text>租车方案选项</text></view>
				<scroll-view scroll-y="true">
					<view class="planListBox">
						<view class="planList" :class="{active: currentPlanIndex == index}"
							v-for="(plan, index) in planList" :key="index"
							@tap="choosePlan(plan.planMealId, plan.days)">
							<text class="name">{{plan.mealName}}</text>
							<text class="price">{{plan.averagePrice}}日均</text>
							<text v-if="plan.remark.length > 0" class="remark">{{plan.remark}}</text>
						</view>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<u-modal title="提示" content="您的账号暂未认证,是否去认证?" :show="showAuthCerAlert" showCancelButton
			@confirm="confirmAuthCer" @cancel="showAuthCerAlert = false">
		</u-modal>
		<u-popup :show="showApplyAlert" mode="top" @close="showApplyAlert=false">
			<appointmentInfo :type="1" @confimChange="confimChange"></appointmentInfo>
		</u-popup>
	</view>
</template>

<script>
	import appointmentInfo from '@/components/appointmentInfo/longOrder-appointment.vue'
	import {
		classificationList,
		modelMealList

	} from '@/api/home-api.js'
	import {
		longClassificationMoldelList
	} from '@/api/longOrder-api.js'
	import setting from '@/settings.js'
	const moment = require('@/utils/moment.js');
	export default {
		components: {
			appointmentInfo
		},
		data() {
			return {
				baseImageUrl: setting.baseImageUrl,
				tenantId: this.$store.state.user.tenantId,
				classification: '',
				sort: 0, //排序
				seriesId: '', //车系id
				categoryList: [],
				carList: [],
				showPlan: false,
				planList: [],
				currentPlanIndex: -1,
				currentCarInfo: {},
				showAuthCerAlert: false,
				currentPlanId: '',
				currentBrandIndex: 0,
				currentBrandId: '',
				currentSeriesIndex: 0,
				showApplyAlert: false,
				loading: true
			}
		},
		computed: {
			option1() {
				var sort = this.$store.state.initData.initData.sort;
				var result = [];
				sort.forEach((item) => {
					item.text = item.dictLabel;
					item.value = item.dictValue;
					result.push(item);
				})

				return result;

			},
			option2() {
				var brand = this.$store.state.initData.initData.brand;
				return brand;
			},
			//是否认证下单（1.是 2.否）
			certificationOrder() {
			    return this.$store.state.initData.initData.certificationOrder;	
			},
			city() {
				return this.$store.state.user.lCityName;
			},
			cityId() {
				return this.$store.state.user.lCityId;
			},
			storeName() {
				return this.$store.state.order.lStoreName;
			},
			storeId() {
				return this.$store.state.order.lStoreId;
			},
			takeCarTime() {
				return this.$store.state.order.lStartTime;
			},
			tenancyTerm() {
				return this.$store.state.order.lTenancyTerm;
			},
			censorStatus() {
				return this.$store.state.user.censorStatus;
			}

		},
		onLoad() {
			this.getCategoryInfo();
		},
		methods: {
			//筛选左侧item的点击事件
			selectedBrand(item, index) {
				this.currentBrandIndex = index;
				this.currentBrandId = item.brandId;
			},
			selectedSeries(item, index) {
				this.currentSeriesIndex = index;
				this.seriesId = item.seriesId;
			},
			filterConfim() {
				this.$refs.item2.toggle(false);
				this.getCategoryMoldelList();
			},
			onChange(value) {
				this.sort = value.detail;
				this.getCategoryMoldelList();
			},
			//一级分栏点击
			tabtap(classification) {
				this.classification = classification;
				this.getCategoryMoldelList();
			},

			getCategoryInfo() {
				classificationList({
					tenantId: this.tenantId,
					storeId: this.storeId,
					bizType: this.$store.state.order.businessNo
				}).then(res => {
					this.categoryList = res.data;
					if (this.categoryList.length > 0) { //如果存在车型分类
						this.classification = this.categoryList[0].classification;
						this.getCategoryMoldelList();
					}

				})
			},

			getCategoryMoldelList() {
				this.loading = true;
				longClassificationMoldelList({
					tenantId: this.tenantId,
					storeId: this.storeId,
					classification: this.classification,
					bizType: this.$store.state.order.businessNo,
					sort: this.sort,
					seriesId: this.seriesId,
					pageNo: 1,
					pageSize: 1000
				}).then(res => {
					this.loading = false;
					this.carList = res.data;
					for (let item of this.carList) {
						item.labels = item.label.split(',');
						item.totalPrice = this.tenancyTerm * item.monthlyRent;
					}
				})
			},
			//筛选重置
			reset() {
				this.currentSeriesIndex = 0;
				this.seriesId = '';
			},
			//确认修改
			confimChange() {
				this.showApplyAlert = false;
				this.getCategoryInfo();
			},
			//车型详情
			carDetail(item) {
				uni.navigateTo({
					url: './longOrder-carDetail?planId=' + item.longPlanId + '&carUrl=' + item.url
				})
			},
			//选择套餐
			lookPlan(item) {
				this.currentPlanId = item.longPlanId;
				//判断用户是否登录
				if (this.$store.state.user.isLogin) { //已经登录
					 if(this.certificationOrder == 1) {//需要实名认证
						 if (this.censorStatus == 2) { //已认证
						 	this.currentCarInfo = item;
						 	uni.navigateTo({
						 		url: '../order/confim-longOrder?planId=' + item.longPlanId + '&carUrl=' + item.url
						 	})
						 } else { //未认证->去认证
						 	this.showAuthCerAlert = true;
						 }
					 }else {
						 this.currentCarInfo = item;
						 uni.navigateTo({
						 	url: '../order/confim-longOrder?planId=' + item.longPlanId + '&carUrl=' + item.url
						 })
					 }
				} else { //未登录
					uni.navigateTo({
						url: '../../pages/login/login'
					})
				}

			},
			//确认套餐
			// choosePlan(planMealId, days) {
			// 	this.showPlan = false;
			// 	uni.navigateTo({
			// 		url: '../order/confim-order?planId=' + this.currentPlanId + '&planMealId=' + planMealId +
			// 			'&planDay=' + days + '&carUrl=' + this.currentCarInfo.url
			// 	})
			// },

			//确定认证
			confirmAuthCer() {
				this.showAuthCerAlert = false;
				uni.navigateTo({
					url: '../../pages/login/real_name'
				})
			}

		}
	}
</script>

<style lang="scss">
	.topWrapper {
		width: 100%;
		background-color: $bg-white-color;
		text-align: center;
		z-index: 2;

		.orderInfoWrapper {
			padding: 14upx 0;

			.rentCarInfo {
				background-color: $bg-color-f5;
				margin: 0 36upx 20upx;
				border-radius: 16upx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.contentBox {
					padding: 30upx 0;
					width: 33%;

					text {
						color: $text-color-33;
						display: block;
					}

					text:nth-child(1) {
						font-size: 26upx;
						font-weight: bold;
					}

					text:nth-child(2) {
						font-size: 22upx;
						margin-top: 18upx;
					}
				}

			}
		}
	}

	.filterWrapper {
		margin-top: 0upx;
		z-index: 2;
	}


	.carWrapper {
		margin-top: 10upx;
		background-color: $bg-color-f5;
		display: flex;
		width: 100%;
		overflow: hidden;
		position: relative;
	}

	.left-wrapper {
		// width: 200upx;
		width: 25%;
		height: 100%;
		position: fixed;

		.left-content {
			.title-content {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: space-around;
				width: 100%;
				height: 100upx;
				padding: 20upx 0;
				font-size: 28upx;
				color: 30upx;
				position: relative;

				&.active {
					color: $main-color;
					background: $bg-white-color;

					&:before {
						content: '';
						position: absolute;
						left: 0;
						top: 50%;
						transform: translateY(-50%);
						height: 36upx;
						width: 8upx;
						background-color: $main-color;
						border-radius: 0 4px 4px 0;
						opacity: .8;
					}
				}

			}
		}
	}

	.right-wrapper {
		// flex: 1;
		width: 75%;
		height: 100%;
		margin-left: 25%;
		float: right;

		.right-content {
			width: 100%;
			border-left: 1rpx solid $liner-color;
			box-sizing: border-box;
		}
	}

	.car-item {
		padding: 24upx;
		background-color: $bg-white-color;
		position: relative;
		margin-bottom: 10upx;

		.carInfoWrapper {
			display: flex;
			border-bottom: 1upx solid $liner-color;
			padding-bottom: 30upx;

			.carImg {
				width: 235px;
				height: 118rpx;
				margin-right: 10upx;
			}

			.carModelContent {
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				justify-items: center;
				align-items: center;

				.carInfo {
					color: $text-color-33;
					font-size: 28upx;
					font-weight: bold;
				}

				.other {
					color: #131313;
					font-size: 22upx;
				}
			}
		}

		.carLabelWrapper {
			padding: 30upx 0;

			.label {
				background-color: #f0f0f0;
				padding: 10upx;
				margin-right: 16upx;
				border-radius: 2upx;
				color: $text-color-33;
				font-size: 20upx;
			}
		}

		.bottomWrapper {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.btnBox {
				color: $main-color;
				font-size: 26upx;
			}

			.bottomRight {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-end;

				.priceBox {
					.priceInfo {
						color: $text-color-price;
						font-size: 44upx;
						font-weight: bold;
						position: relative;

						&::before {
							content: '¥';
							font-size: 24upx;
						}

						// &::after {
						// 	content: '/天';
						// 	font-size: 24upx;
						// }
					}

					.priceUnit {
						color: $text-color-price;
						font-size: 24upx;
					}

					.go-arrow {
						width: 26upx;
						height: 26upx;
						margin-left: 10upx;
						position: relative;
						bottom: -5upx;

					}
				}

				.totalPrice {
					color: $text-color-33;
					font-size: 20upx;
					font-weight: bold;
				}
			}

		}
	}




	.planWrapper {
		padding: 40upx;

		.planTitle {
			color: $text-color-33;
			font-size: 30upx;
			font-weight: bold;
			margin-bottom: 30upx;
		}

		.planListBox {
			max-height: 680upx;

			.planList {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-items: center;
				height: 180upx;
				border-radius: 20upx;
				padding: 20upx;
				margin-top: 20upx;
				background-color: #F2F2F2;


				.name {
					color: $text-color-33;
					font-size: 24upx;
				}

				.price {
					font-size: 36upx;
					font-weight: bold;
					color: $text-color-price;
					position: relative;
					top: -20upx;

					&:before {
						content: '¥';
						font-size: 24upx;
					}
				}

				.remark {
					color: $text-color-99;
					font-size: 20upx;
				}

				&.active {
					background-color: $main-color;

					text {
						color: $text-color-ff;
					}
				}
			}
		}
	}

	.brandWrapper {
		max-height: 400upx;
		display: flex;
		// position: relative;
		padding-bottom: 120upx;
		width: 100%;
		border-top: 1px solid $liner-color;

		.brandLeft-wrapper {
			width: 40%;
			height: 400upx;
			background-color: #F5F5F5;

			.leftContent {
				.brandBox {
					height: 94upx;
					display: flex;
					justify-content: center;
					align-items: center;
					position: relative;

					image {
						width: 32upx;
						height: 32upx;
					}

					text {
						margin-left: 10upx;
						color: $text-color-33;
						font-size: 26upx;
						font-weight: bold;
					}

					&.active {
						color: $main-color;
						background: $bg-white-color;

						&:before {
							content: '';
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							height: 36upx;
							width: 8upx;
							background-color: $main-color;
							border-radius: 0 4px 4px 0;
							opacity: .8;
						}
					}
				}
			}
		}

		.brandRight-wrapper {
			position: relative;
			width: 100%;
			height: 400upx;
			background-color: $bg-white-color;

			.rightContent {
				// width: 100%;
				display: flex;
				flex-direction: column;

				.seriesBox {
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80upx;
					line-height: 80upx;
					padding: 0 20upx;
					border-bottom: 1px solid $liner-color;

					text {
						color: $text-color-99;
						font-size: 26upx;
						font-weight: bold;
					}

					image {
						width: 30upx;
						height: 30upx;
					}

					&.checked {
						text {
							color: $main-color;
						}
					}
				}

			}
		}



		.btnWrapper {
			width: 100%;
			display: flex;
			justify-content: space-around;
			align-items: center;
			background-color: $bg-white-color;
			position: absolute;
			padding: 20upx 0;
			bottom: 0;
			border-top: 1px solid $liner-color;

			text {
				display: inline-block;
				width: 180upx;
				height: 60upx;
				line-height: 60upx;
				border-radius: 90upx;
				color: $text-color-ff;
				font-size: 30upx;
				font-weight: bold;
				text-align: center;

			}

			text:nth-child(1) {
				background: #dbdbdb;
			}

			text:nth-child(2) {
				background: linear-gradient(to right, #32ace9 0%, #176cfb 100%);
			}

		}
	}
</style>
